<template>
  <div>
    <el-image
      :style="`margin:10px;width:${width}px;height:${height}px;border-radius:8px;
`"
      :src="src"
      :preview-src-list="[src]"
    >
      <div slot="placeholder" class="image-slot">
        加载中
        <span class="dot">...</span>
      </div>
      <div slot="error" class="image-slot">
        <img
          src="../../assets/images/default.png"
          :style="`width:${width}px;height:${height}px;border-radius:8px`"
          alt
        />
      </div>
    </el-image>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: false,
      default: ''
    },
    width: {
      type: Number,
      required: false,
      default: 200
    },
    height: {
      type: Number,
      required: false,
      default: 120
    }
  },
  data() {
    return {
      dialog: false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>